<template>
  <van-nav-bar title="我的订单" left-arrow @click-left="onBack" />

  <!-- 标签 -->
  <van-tabs v-model:active="active" @change="onTab">
    <van-tab v-for="item in tarList" :title="item.title" :name="item.name" :key="item.name"> </van-tab>
  </van-tabs>

  <!-- 订单列表 -->
  <div class="list-box" v-if="OrderList.length > 0">
    <div class="list">
      <!-- 一个item代表一个订单 -->
      <div class="item" v-for="item in OrderList" :key="item.id">
        <div class="header">
          <div class="left">
            订单号：<span>{{ item.code }}</span>
          </div>
          <div class="right">{{ item.status_text }}</div>
        </div>
        <div class="content">
          <van-card
            v-for="son in item.OrderProduct"
            :key="son.id"
            :num="son.nums"
            :price="son.total"
            desc="描述信息"
            :title="son.products.name"
            :thumb="son.products.cover_cdn"
          >
            <template #desc>
              <span>商品单价：￥{{ son.price }}</span>
            </template>
          </van-card>
        </div>
        <div class="footer">
          <div class="date">{{ item.createtime_text }}</div>
          <div class="btn">
            <van-button type="primary" size="mini" color="#7232dd" :to="{ path: '/order/order/info', query: { orderid: item.id } }"
              >订单详情</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="item.status >= 1 && item.status <= 4"
              :to="{ path: '/order/order/aftersale', query: { orderid: item.id } }"
              >申请售后</van-button
            >
            <van-button type="primary" size="mini" v-if="item.status == 0">确认支付</van-button>
            <van-button
              type="primary"
              size="mini"
              v-if="(item.status >= 2 && item.status <= 4) || item.status < 0"
              @click="this.$router.push({ path: '/order/express/index', query: { code: item.code } })"
              >查看物流</van-button
            >
            <!-- 点击跳转，直接把订单号传过去 -->
            <van-button type="primary" size="mini" v-if="item.status == 2">确认收货</van-button>
            <van-button type="primary" size="mini" v-if="item.status == 3" @click="toRate(item.id)">立即评价</van-button>
            <van-button type="danger" size="mini" v-if="item.status == 4">删除订单</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <van-empty description="暂无订单" v-else />
</template>
<script>
  export default {
    created() {
      this.LoginAuth = this.$cookies.get('LoginAuth') ? this.$cookies.get('LoginAuth') : {}

      this.getOrderData()
    },
    data() {
      return {
        active: '',
        code: '',
        tarList: [
          {
            title: '全部',
            name: '',
          },
          {
            title: '待支付',
            name: 0,
          },
          {
            title: '待发货',
            name: 1,
          },
          {
            title: '待收货',
            name: 2,
          },
          {
            title: '待评价',
            name: 3,
          },
          {
            title: '退货中',
            name: -2,
          },
          {
            title: '已退货',
            name: -1,
          },
          {
            title: '退货被拒',
            name: -3,
          },
        ],
        OrderList: [],
        LoginAuth: {},
      }
    },
    methods: {
      onBack() {
        this.$router.push('/business/base/index')
      },
      onTab(value) {
        this.getOrderData()
      },
      toExpress() {},
      async getOrderData() {
        let data = {
          busid: this.LoginAuth.id,
        }

        if (this.active !== '') {
          data.status = this.active
        }

        let result = await this.$api.OrderIndex(data)

        if (result.code === 1) {
          this.OrderList = result.data
        }
      },

      toRate(orderid) {
        this.$router.push({ path: '/order/order/rate', query: { orderid } })
      },
    },
  }
</script>

<style>
  .list-box {
    background: #ccc;
  }

  .list-box .header {
    display: flex;
    justify-content: space-between;
    /* padding: 0 10px; */
  }

  .list .item .left span {
    font-size: 14px;
    font-weight: bold;
  }

  .item {
    padding: 5px 5px 3px;
    background: #fff;
    margin-bottom: 5px;
  }

  .item .header .left {
    font-size: 13px;
  }

  .item .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .item .footer .date {
    font-weight: bold;
  }
</style>
